<template>
  <div class="page-nav">
    <div class="nav-box" v-bind:class="{'nav-box-1':data==1,'nav-box-2':data==2,'nav-box-3':data==3}">
      <div @click="JumpScan" class="n-scan">扫码</div>
      <div @click="Jump('index')" class="n-home">主页</div>
      <div @click="Jump('account')" class="n-user">我的</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    Jump(path) {
      this.$router.push(path);
    },
    JumpScan() {
      wx.ready(function() {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          }
        });
      });
    }
  }
};
</script>

<style scope lang="less">
.page-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  border-top: 2px solid #ddd;
  background: #fff;
  .nav-box {
    display: -webkit-box;
    height: 100%;
    & > div {
      -webkit-box-flex: 1;
      box-sizing: border-box;
      padding-bottom: 15px;
      display: -webkit-box;
      -webkit-box-align: end;
      -webkit-box-pack: center;
      font-size: 30px;
      color: #666;
    }
    .n-scan {
      background: url("../public/imgs/icon-nav-1.svg") center 15px no-repeat;
      background-size: 48px 48px;
    }
    .n-home {
      background: url("../public/imgs/icon-nav-2.svg") center 15px no-repeat;
      background-size: 56px 56px;
    }
    .n-user {
      background: url("../public/imgs/icon-nav-3.svg") center 15px no-repeat;
      background-size: 56px 56px;
    }
  }
  .nav-box-1 {
    .n-scan {
      background: url("../public/imgs/icon-nav-1-select.svg") center 15px
        no-repeat;
      background-size: 48px 48px;
      color: #3687c8;
    }
  }
  .nav-box-2 {
    .n-home {
      background: url("../public/imgs/icon-nav-2-select.svg") center 15px
        no-repeat;
      background-size: 48px 48px;
      color: #3687c8;
    }
  }
  .nav-box-3 {
    .n-user {
      background: url("../public/imgs/icon-nav-3-select.svg") center 15px
        no-repeat;
      background-size: 48px 48px;
      color: #3687c8;
    }
  }
}
</style>
